<!--  -->
<template>
    <div class='gonggao'>
        <div class="first">
            <img src="../../public/images/gonggao.png" alt="">

            <van-swipe style="height: 50px; z-index:0;" vertical autoplay="2000" indicator-color="transparent" >
                <van-swipe-item v-for="(item) in list" :key="item.id">{{item.title}}</van-swipe-item>
                
            </van-swipe>
        </div>
        <div class="two" style="z-index: 100;">
            <ul>
                <li>
                    <img src="../../public/images/qiandao.png" alt="">
                    <span>签到</span>
                </li>
                <li>
                    <img src="../../public/images/mianshi2.png" alt="">
                    <span>面试</span>
                </li>
                <li>
                    <img src="../../public/images/shangcheng.png" alt="">
                    <span>商城</span>
                </li>
                <li>
                    <img src="../../public/images/tijian.png" alt="">
                    <span>体检</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import service from "../utils/request";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            msg: "",
            list: []

        };
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    beforeMount() { }, //生命周期 - 挂载之前
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

        let that = this;
        service({
            url: "notice",
            method: "GET",
        }).then(res => {
            that.list = res.data.data
            console.log(that.list);


        })


    },
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() {


    }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，激活
    deactivated() { }, //如果页面有keep-alive缓存功能，非激活
}
</script>
<style lang="less">
.gonggao {
    width: 360px;
    height: 100px;
    background-color: pink;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;

    .first {
        width: 100%;
        height: 30px;
        // border: 1px solid red;
        display: flex;
        flex-direction: row;
        font-weight: 600;
        background-color: #efeeee;

    }

    .two {
        width: 100%;
        height: 70px;
        // border: 1px solid green;
        background-color: white;

        ul {
            width: 100%;
            height: 70px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            flex-grow: 1;

            li {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                align-self: center;
                font-size: 14px;
            }
        }
    }
}
</style>